The complications of typographic size on the web 網頁排版尺寸的複雜性

A font's body size only says so much about the actual size of its glyphs 字型的主體尺寸並不能完全反映字形的實際大小

即使設定相同的字型大小,不同字型的視覺大小也可能不一致。這是因為字型大小是基於字型主體高度來定義的。

在數字字型中,每個字形都有一個不可見的主體框,決定了字形周圍的空間。主體寬度可以不同,但同一字型的主體高度(em值)是固定的。字形可以超出主體,但通常上下延伸部分會在em框內。在CSS中設定字型大小時,實際是在設定em的大小,比如16px的字型大小意味著em值為16px。

影響字型視覺大小的關鍵指標(如大寫高度和x字高)在不同字型間差異顯著。例如,Verdana的x字高佔em值約55%,而Baskerville僅佔40%,導致相同字型大小時Baskerville看起來較小。要達到相似的視覺大小,Baskerville需要設定更大尺寸。

The most critical measurements for perceiving type sizes are angular 感知字型大小的最關鍵測量:角度度量

物體離眼睛越近就會顯得越大。在考慮觀看距離時,物體的感知大小不是用固定單位(如點或英寸)來衡量,而是用角度單位(如度數和弧分)來測量。

舉個例子,當從10英寸的距離觀看物理尺寸為72磅的文字時,其視覺大小約為5.72度(即343弧分)。如果觀看距離增加1.5倍(變為15英寸),要保持相同的視覺大小,就需要將物理尺寸也相應增加1.5倍(變為108磅)。

這種角度測量方法是視力測試視力表的基礎,也用於設計交通標誌等重要文字資訊。這種方法對識別字母和單詞的效率至關重要。

然而,在網頁設計中難以基於弧分設定字型大小,因為同一設計需要適應不同距離和裝置的觀看需求,比如近距離的手機和遠距離的臺式顯示器。

雖然CSS媒體查詢和響應式設計有所幫助,但由於使用者情況各異,我們仍需透過估算和經驗來做出妥協。

It is currently impossible to confidently work with exact physical sizes on the web 在網頁上精確控制物理尺寸目前仍是不可能的

在CSS中使用"絕對"物理單位(如、釐米或英寸)實際上並不能精確控制物理尺寸。比如將元素設為12in寬,實際顯示可能並非真正12英寸,且在不同裝置上的實際尺寸會有差異。

媒體查詢同樣存在這個問題。指定的物理單位(如20釐米)與實際測量值並不對應"絕對"單位實際上只是畫素的倍數。在網頁設計中,畫素與實際物理尺寸並無關聯。雖然顯示器能向系統提供物理資訊,但瀏覽器目前無法利用這些資料。


Pixels are only a vague concept 畫素只是一個模糊的概念

在網頁設計中,畫素的定義是基於螢幕觀看角度的。根據W3C網頁標準defines,一個標準畫素就是當你用手臂長度觀看96dpi螢幕時所形成的視覺角度(大約0.0213度)。

這個定義聽起來很科學,但實際使用時有一些問題。首先,為了保持與舊系統的相容性,W3C一直沿用96dpi這個標準。其次,這個定義在不同裝置上的實際效果並不統一。

The design of a typeface can affect its size requirements 字型設計會影響其尺寸要求

窄體字型相比寬體字型可能需要稍微增加字號才能達到相同的可讀性,而且開放式字型(如字母"e"的開口較大的字型)通常比封閉式字型表現更好。一些特殊的設計特徵在小字號時可能會影響文字的可讀性。

Sizing uplink 規模提升

雖有諸多限制,數字排版仍提供強大的靈活性和控制力。設計師如欲突破基礎排版限制,可以:

設計師對排版尺寸的細節越瞭解、考慮越周全,讀者的閱讀體驗就會越好。